<template>
  <div class="container enroll">
    <div class="jifen-body">
      <div class="jifen-body-info">
        我的积分:{{jifen}}
      </div>
    </div>

    <div class="jifen-rank">
      <div class="jifen-rank-title">
        积分明细
      </div>
      <div class="jifen-rank-list">
        <div
          class="jifen-rank-list-item"
          v-for="(item, index) in ranklist"
          :key="index"
        >
          <div class="jifen-rank-list-dete">
            {{item.date}}
          </div>
          <div class="jifen-rank-list-desc">
            {{item.desc}}
          </div>
          <div class="jifen-rank-list-jifen">
            {{item.jifen}}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  components: {
  },

  data () {
    return {
      jifen: '1000',
      ranktop1: {},
      ranktop2: {},
      ranktop3: {},
      rankother: [],
      ranklist: [
        {
          id: 1,
          date: '2022-01-01',
          desc: '签到奖励',
          jifen: '+6'
        },
        {
          id: 2,
          date: '2022-01-01',
          desc: '登录奖励',
          jifen: '+6'
        },
        {
          id: 1,
          date: '2022-01-01',
          desc: '签到奖励',
          jifen: '+6'
        },
        {
          id: 2,
          date: '2022-01-01',
          desc: '登录奖励',
          jifen: '+6'
        }
      ]
    }
  },
  onLoad () {
    this.ranktop1 = this.ranklist.filter(function (item) {
      return item.rank === 1
    })[0]
    this.ranktop2 = this.ranklist.filter(function (item) {
      return item.rank === 2
    })[0]
    this.ranktop3 = this.ranklist.filter(function (item) {
      return item.rank === 3
    })[0]
    this.rankother = this.ranklist.filter(function (item) {
      return item.rank > 3
    })
    console.log(this.ranktop)
  },
  onShow () {
    this.onLoadData()
  },
  methods: {
    onLoadData () {
    }
  }
}
</script>

<style lang="less">
@grey: #666;
@red: red;
.container {
  background: #f7f7fa;
}
.jifen-body {
  padding: 20px 10px;
  line-height: 25px;
  &-info {
    float: left;
    font-size: 18px;
    color: #ee732f;
  }
  &-detail {
    float: right;
    font-size: 14px;
    color: #666;
  }
}
.jifen-rank {
  clear: both;
  padding: 10px;
  &-title {
    font-weight: 800;
  }
  &-top {
    width: 70%;
    // height: 50px;
    text-align: center;
    margin: 0px auto;
    image {
      width: 50px;
      height: 50px;
    }
    &-1 {
      text-align: center;
      image {
        width: 70px;
        height: 70px;
      }
    }
    &-2 {
      float: left;
    }
    &-3 {
      float: right;
    }
  }
  &-list {
    font-size: 14px;
    &-item {
      clear: both;
      height: 30px;
      line-height: 30px;
      margin: 10px 5px;
      color: @grey;
    }
    &-dete {
      float: left;
    }
    &-desc {
      float: left;
      padding: 0px 10px;
    }
    &-jifen {
      float: right;
    }
  }
}
.grey {
  color: @grey;
}
.red {
  color: @red;
}
</style>
